<template>
  <div>
    <!-- 列表------------- -->
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

      <el-table-column prop="num"
                       label="序号"
                       width="120">
      </el-table-column>
      <el-table-column prop="innerCode"
                       label="设备编号"
                       width="180">
      </el-table-column>

      <el-table-column prop="type.name"
                       label="设备型号"
                       width="240"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="node.name"
                       label="详细地址"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="state"
                       label="运营状态"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="operate"
                       label="设备状态"
                       show-overflow-tooltip>
        <template>
          <span class="sp9">离线</span><span class="sp99">货道</span><span class="sp99">传动轴</span>
        </template>
      </el-table-column>

      <el-table-column prop="operate"
                       label="操作"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="sp11"
                @click="outerVisibleCarouselFn(scope.$index, scope.row)">查看详情</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表--------------->

    <div class="block">
      <el-pagination prev-text="上一页"
                     next-text="下一页"
                     @prev-click="handleSizeChange"
                     @next-click="handleCurrentChange"
                     :current-page.sync="currentPage1"
                     :page-size="10"
                     layout="slot,next,prev"
                     :total="Number(FixingStateTotal[0]?.totalCount)">
        <span class="sp1">共{{ FixingStateTotal[0]?.totalCount }}条数据 第{{FixingStateTotal[0]?.pageIndex  }}/{{  FixingStateTotal[0]?.totalPage }}页</span>
      </el-pagination>
    </div>
    <DiaLog></DiaLog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DiaLog from '@/components/fixStateComs/dialog.vue'
export default {
  components: {
    DiaLog
  },
  data () {
    return {
      tableData: [],
      currentPage1: 1,
      loading: false,
      num: 1
    }
  },

  methods: {
    handleSelectionChange (val) {
      console.log(val)
    },
    outerVisibleCarouselFn (index, rouw) {
      this.$store.dispatch('fixingState/getItemTotalFn', rouw)
      this.$store.dispatch('fixingState/getItemTotalMoneyFn', rouw)
      this.$store.dispatch('fixingState/getskuCollect_vuex', rouw)
      this.$store.commit('fixingState/updatadialogVisible')
    },
    handleSizeChange (val) {
      this.$store.dispatch('fixingState/getFixingStateLsit', val)
    },
    handleCurrentChange (val) {
      this.$store.dispatch('fixingState/getFixingStateLsit', val)
    }
  },
  computed: {
    ...mapState('fixingState', ['FixingStateTotal', 'TableList'])
  },
  watch: {
    TableList: {
      immediate: true,
      deep: true,
      handler (newVal, oldVal) {
        // console.log(this.FixingStateTotal);
        this.tableData = newVal
      }
    },
    created () {

    }
  }
}
</script>

<style lang="less" scoped>
.sp1 {
  font-size: 14px !important;
  color: #dbdfe5 !important;
}
.sp11 {
  color: #5f84ff;
  margin-left: 8px;
  cursor: pointer;
}
.sp9 {
  color: #fff;
  width: 50px;
  border-radius: 10px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  line-height: 22px;
  height: 22px;
  background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
}
.sp99 {
  height: 23px;
  padding: 3px 12px;
  background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
  border-radius: 10px;
  text-align: center;
  margin-left: 10px;
  font-size: 12px;
  color: #fff;
  line-height: 23px;
}
::v-deep {
  .el-pagination .btn-prev {
    float: right;
    background-color: #d5ddf8 !important;
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
  }
  .el-pagination .btn-next {
    float: right;
    background-color: #d5ddf8 !important;
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
  }
  .el-pagination {
    padding: 20px 20px;
    background-color: #fff;
  }
  .el-table--fit {
    padding: 0px 20px;
    margin-top: 20px;
  }
}
</style>
